<template>
    <!-- 面包屑 -->
    <div class="breadcumb">
        <el-radio-group v-model="isCollapse" style="margin-right: 10px">  
            <i
                v-show="!isCollapse"
                class="iconfont icon-menu_fold"
                @click="changeMenu"
            ></i>
            <i
                v-show="isCollapse"
                class="iconfont icon-menu_unfold"
                @click="changeMenu"
            ></i>
        </el-radio-group>

        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <transition-group name="breadcrumb">
                <el-breadcrumb-item v-for="v in breadList" :key="v.path">
                    <router-link :to="v.path">{{ v.meta.title }}</router-link>
                </el-breadcrumb-item>
            </transition-group>
        </el-breadcrumb>

    </div>
</template>

<script>
export default {
    props: ["isCollapse"],
    data() {
        return {
            breadList: [],
        };
    },
    created() {
        console.log(this.$route.matched);
        this.breadList = this.$route.matched;
    },
    watch: {
        //监听
        // $route(to,from) {
        //     this.breadList = to.matched;
        // }
        //监听
        $route(to) {
            this.breadList = to.matched;
        },
    },
    methods: {
        changeMenu() {
            //点击切换按钮的时候 修改父组件的数据   isCollapse
            this.$emit("changeCollapse");
        },
    },
};
</script>

<style scoped>
.breadcumb {
    display: flex;
}
.el-radio-group {
    font-size: 20px;
    line-height: 60px;
    margin-left: 10px;
    color: #000000;
}
</style>
